<template>
    <mars-dialog title="我的demo" width="300" height="400" right="20" top="40" bottom="40">
      <a-row :gutter="5">
        <a-col :span="19">
          <mars-input v-model:value="extent" :allowClear="true"></mars-input>
        </a-col>
        <a-col :span="5">
          <a-space size="small">
            <mars-button class="small-btn" @click="onClickDrawExtent">绘制</mars-button>
          </a-space>
        </a-col>
      </a-row>
      <template #icon>
        <mars-icon icon="bookmark-one" width="18" />
      </template>
    </mars-dialog> 
  </template>

  <script setup lang="ts">
  import { ref, onMounted } from "vue"
  import * as mapWork from "./map"
  import useLifecycle from "@mars/common/uses/use-lifecycle"
  import { useWidget } from "@mars/common/store/widget"

  
  const { currentWidget } = useWidget()
  
  currentWidget.onUpdate(() => {
    // console.log(e)
  })
  
  useLifecycle(mapWork)

  const couter = ref(10)
  onMounted(() => {
    setTimeout(() => {
      couter.value = 100
    }, 2000)
  })


  useLifecycle(mapWork)
  const extent = ref()
  const onClickDrawExtent = () => {
    mapWork.drawExtent()
  }
  mapWork.eventTarget.on("hasDraw", (item:any) => {
   console.log("接收到数据", item.extent)
   extent.value = JSON.stringify(item.extent)
  })
  </script>
  <style lang="less"></style>
